import React from 'react';
import { Dialog, Nav } from '@teamix/ui';
import './index.scss';

const prefix = 'uiless-user-profile';

class UILessUserProfile extends React.Component {
  static defaultProps = {
    uiless_config: window.UILessConfig,
    vpc: false,
    vpc_personal: {},
    customNavs: [],
  };

  constructor(props) {
    super(props);
    this.onNavSelect = this.onNavSelect.bind(this);

    const { selectedNavKey, visible } = this.props;

    this.state = {
      visible: visible || false,
      selectedNavKey: selectedNavKey || 'ssh',
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { selectedNavKey, uiless_config } = nextProps;
    window.UILessConfig = uiless_config || window.UILessConfig;
    if (selectedNavKey) {
      this.setState({
        selectedNavKey,
      });
    }
  }

  onOpen = () => {
    const { onOpen } = this.props;

    this.setState({
      visible: true,
    });

    if (onOpen) {
      onOpen();
    }
  };

  onClose = () => {
    const { onClose } = this.props;
    this.setState({
      visible: false,
    });

    if (onClose) {
      onClose();
    }
  };

  onNavSelect = (selectedKeys) => {
    if (selectedKeys[0] === 'personal-info') {
      window.open(window.TB_NAVIGATION_CONFIG.sdkConfigs.accountSettingUrl);
      return;
    }

    this.setState({
      selectedNavKey: selectedKeys[0],
    });
  };

  getContent = (selectedNavKey) => {
    const {
      customNavs,
    } = this.props;
    const reactElementValue = customNavs.find((va) => va.key === selectedNavKey);

    if (reactElementValue && reactElementValue.plugin) {
      return (
        <React.Fragment>
          {
           reactElementValue.plugin
          }
        </React.Fragment>
      );
    } else {
      return null;
    }
  };

  render() {
    const { selectedNavKey } = this.state;
    const { visible, customNavs } = this.props;

    return (
      <React.Fragment>
        <Dialog
          className={`${prefix}-dialog`}
          id={'personal-setting-dialog'}
          visible={visible || this.state.visible}
          onOk={this.onClose}
          onCancel={this.onClose}
          size="normal"
          onClose={this.onClose}
          title={<div style={{ paddingLeft: 13 }}>个人设置</div>}
          style={{ width: 800 }}
          height="500px"
          footer={false}
        >
          <div className="dialog-content">
            <div className="menu-panel">
              <Nav
                noBg
                defaultSelectedKeys={'ssh'}
                onSelect={this.onNavSelect}
                selectedKeys={selectedNavKey}
              >
                <Nav.Item key="personal-info">{'个人设置'}</Nav.Item>
                <Nav.Divider />
                {
                  customNavs && customNavs.length > 0 ? (
                    <Nav.Group>
                      {
                        customNavs.map((va) => {
                          return (
                            <Nav.Item key={va.key}>{va.title}</Nav.Item>
                          );
                        })
                      }
                    </Nav.Group>
                  ) : null
                }
              </Nav>
            </div>
            <div className="content-panel" id="content-panel">
              {this.getContent(selectedNavKey)}
            </div>
          </div>
        </Dialog>
      </React.Fragment>
    );
  }
}

export default UILessUserProfile;